<template>
  <div class="detail-container">
    <div class="title">
      移动网信息
    </div>
    <div>
      <div class="content">
        <span>无线模组状态:</span>
        <span>{{ networkStateObj[networkInfo.state] || '--'}}</span>
      </div>
      <div class="content flex justify-between items-center">
        <div>
          <span>ICCID:</span>
          <span>{{networkInfo.iccid || '--'}}</span>
        </div>
        <q-btn v-if="networkInfo.iccid" flat dense color="primary"  v-clipboard:copy="networkInfo.iccid"  v-clipboard:success="onCopy">
          复制
        </q-btn>
      </div>
      <div class="content flex justify-between items-center">
        <div>
          <span>IMEI:</span>
          <span>{{networkInfo.imei || '--'}}</span>
        </div>
        <q-btn v-if="networkInfo.imei" flat dense color="primary"  v-clipboard:copy="networkInfo.imei"  v-clipboard:success="onCopy">
          复制
        </q-btn>
      </div>
      <div class="content flex justify-between items-center">
        <div>
          <span>IMSI:</span>
          <span>{{networkInfo.imsi || '--'}}</span>
        </div>
        <q-btn v-if="networkInfo.imsi" flat dense color="primary"  v-clipboard:copy="networkInfo.imsi"  v-clipboard:success="onCopy">
          复制
        </q-btn>
      </div>
      <div class="content">
        <span>模组型号:</span>
        <span>{{networkInfo.model || '--'}}</span>
      </div>
      <div class="content">
        <span>模组版本号:</span>
        <span>{{networkInfo.soft || '--'}}</span>
      </div>
      <div class="content">
            <span>当前信号
              <span>
                  <q-icon name="iconfont icontubiao-72" class="font-18 text-grey" style="margin-top: -3px"/>
                  <q-tooltip max-width="300px">数字越大，表示信号越差。113：极差，51：极好</q-tooltip>
                </span>
              </span>
        :
        <span>{{ networkInfo.rssi }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { networkStateObj } from '../list-components/plc-dialog/constant'

export default {
  name: 'network-info',
  props: {
    networkInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      networkStateObj: networkStateObj
    }
  },
  methods: {
    onCopy () {
      this.$message.success('复制成功')
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .q-btn--dense{
  padding: 0;
  height: 1.8rem;
}
</style>
<style scoped lang="stylus">
.detail-container
  height 364px
  padding 20px
  .area
    margin-bottom 17.5px
  .title
    line-height 1
    font-size 16px
    font-weight 500
    color $primary

  .content
    color #333333
    line-height 1.8
</style>
